<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/index.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        此浏览器不支持webgl
    </canvas>
</body>
</html>

<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    //着色器
    //创建着色器源码
    //顶点着色器
    const VERTEX_SHADER_SOURCE = `
        //必须要存在mian函数
        void main(){
            //要绘制的点的坐标
            //gl_Position vec4(0.0, 0.0, 0.0, 1.0) vec4(x, y, z, w) w齐次坐标(x/w, y/w, z/w)
            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            //点的大小
            gl_PointSize = 30.0;
        }
    `
    //片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        void main(){
            //gl_FragColor vec4(1.0, 0.0, 0.0, 1.0) vec4(r, g, b, a)
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    `
    
    // //创建着色器
    // const vertexShader = gl.createShader(gl.VERTEX_SHADER)
    // const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

    // //关联着色器和着色器源码
    // gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE)
    // gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE)

    // //编译着色器
    // gl.compileShader(vertexShader)
    // gl.compileShader(fragmentShader)

    // //使用着色器
    // //创建一个程序对象--关联JavaScript程序和webgl
    // const program = gl.createProgram()
    // //程序对象指定着色器
    // gl.attachShader(program, vertexShader)
    // gl.attachShader(program, fragmentShader)

    // //JavaScript和webgl关联
    // gl.linkProgram(program)
    // //使用程序对象
    // gl.useProgram(program)

    initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
    
    //执行绘制
    gl.drawArrays(gl.POINTS, 0, 1)
</script>